<template>
    <el-container style="height: 820px; border: 1px solid #eee">
        <el-aside width="200px">
            <el-row>
                <el-row type="flex">
                    <el-col :span="4"><i class="el-icon-arrow-left"></i></el-col>
                    <el-col :span="16"><h4><a>{{year}}年</a></h4></el-col>
                    <el-col :span="4"><i class="el-icon-arrow-right"></i></el-col>
                </el-row>
                <el-menu>
                    <el-menu-item v-for="(period,index) in periods" :key="period.id"
                                  :index="period.id+''"
                                  @click="getstaff(period.id)">
                        <i class="el-icon-menu"></i>
                        <span slot="title">{{period.name}}</span>
                    </el-menu-item>
                </el-menu>
            </el-row>
        </el-aside>
        <el-container>
            <el-header style="text-align: right; font-size: 15px" height="50px">
                <el-dropdown style="font-size:20px">
                    <i class="el-icon-setting" style="margin-right: 15px"></i>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item>新增</el-dropdown-item>
                        <el-dropdown-item :disabled="current_staff==null">编辑</el-dropdown-item>
                        <el-dropdown-item :disabled="current_staff==null">删除</el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
                <span>{{current_staff?current_staff.name:''}}</span>
            </el-header>

            <el-main>
                <el-table :data="staff" max-height="760" row-class-name="myRowStyle" @row-click="rowclick">
                    <el-table-column prop="name" label="姓名" width="120" sortable>
                    </el-table-column>
                    <el-table-column prop="id_card" label="身份证" width="250" sortable>
                    </el-table-column>
                    <el-table-column prop="dorm_building_name" label="宿舍楼">
                    </el-table-column>
                    <el-table-column prop="dorm_code" label="房号" sortable>
                    </el-table-column>
                    <el-table-column prop="status" label="状态">
                    </el-table-column>
                </el-table>
            </el-main>
        </el-container>
    </el-container>
</template>
<script>
    export default{
        data(){
            return {
                year:new Date().getFullYear(),
                periods: '',
                staff: [],
                current_staff: null
            }
        },
        created(){
            axios.get('api/v1/period/?year='+this.year).then(result => {
                console.log(result);
                this.periods = result.data;
            })
        },
        methods: {
            getstaff(period_id){
                var dpt_id=period_id?period_id:'';

                axios.get('api/v1/staff?period_id=' + period_id).then(
                    result => {
                        console.log(result);
                        this.staff = result.data;
                    }
                );

                this.current_staff = null;
            },
            rowclick(row){
                this.current_staff = row;
            }
        }
    }
</script>
